<template>
  <div class="map-example">
    <el-amap :center="center" :zoom="zoom" @init="init" />
    <div class="wether">苏州市天气：{{ wether }}</div>
  </div>
</template>
<script setup>
import { lazyAMapApiLoaderInstance } from "@vuemap/vue-amap";
import { ref, onMounted } from "vue";
const wether = ref("");
const zoom = ref(12);
const center = ref([121.59996, 31.197646]);
const init = (mapInstance) => {
  const marker = new AMap.Marker({
    position: [121.59996, 31.197646],
  });
  mapInstance.add(marker);
};
onMounted(async () => {
  await lazyAMapApiLoaderInstance.then();
  AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    var weather = new AMap.Weather();

    //执行实时天气信息查询
    weather.getLive("苏州市", function (err, data) {
      console.log(err, data);
      if (data?.info === "OK") {
        wether.value = data.weather;
      }
    });
  });
});
</script>
<style lang="scss">
.map-example {
  width: 100%;
  height: 100%;
  position: relative;
  .el-vue-amap-container {
    width: 100%;
    height: 100%;
    .amap-container {
      width: 100%;
      height: 100%;
    }
  }
  .wether {
    z-index: 999;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>
